<template>
    <div class="side-bar" @click="handleClick">
        <i id="point" class="icon iconfont icon-dian" title="点"></i>
        <i id="line" class="icon iconfont icon-xian" title="线"></i>
        <i id="rect" class="icon iconfont icon-xingzhuang-juxing" title="矩形"></i>
        <i id="polyon" class="icon iconfont icon-duobianxing" title="多边形"></i>
        <i id="polyonline" class="icon iconfont icon-lianxuxianduan" title="多线段"></i>
        <i id="circle" class="icon iconfont icon-xingzhuang-tuoyuanxing" title="圆"></i>
        <i id="mark" class="icon iconfont icon-biaoji" title="标记"></i>
        <i id="draw" class="icon iconfont icon-huihua" title="涂抹"></i>
        <i id="clear" class="icon iconfont icon-cachu" title="擦除"></i>
    </div>
</template>

<script setup>
    const emits = defineEmits(['onChange']);
    const handleClick = event => {
        const type = event.target.id;
        type && emits('onChange', type);
    };
</script>

<style lang="scss" scoped>
    .side-bar{
        box-sizing: border-box;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        height: 100%;
        .iconfont{
            padding: 10px;
            transition: all .2s ease-in-out;
            &:hover{
                background-color: #363636;
            }
        }
    }
</style>